<template>
	<div class="classification homeProductItem" style="margin-bottom: 0.4rem;">
		<div class="aui-row">
			<div v-if="cateList && cateList.length>0" class="aui-col-5" v-for="(item, index) in cateList" :key="index" @click='jumpEvent(item,index)'>
				<div style="position: relative;width: 100%;height: 0;overflow-y: hidden;padding-bottom: 100%;">
					<img style="width: 100%;" :src="item.publicityPicture||item.imageUrl||item.imgUrl||'static/image/demo1.png'"/>
				</div>
				<div class="aui-grid-label">{{item.relTitle||item.name||item.goodsClassName||item.className}}</div>
			</div>
			<div v-if="cateList.length==0 && env == 'edit'" style="height: 2.5rem;line-height: 2.5rem;">暂无数据</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters , mapMutations} from "vuex";
	import handlePath from "../../utils/lxn/handlePath"
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				iconwidth: null,
				cateList:[],
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getseeall"
			]),
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		methods: {
			...mapMutations('xxy', [
				"setseeall",
			]),
			tendata() {
				this.cateList = []
				let length = this.dataList.length < 10 ? this.dataList.length : 10
				for(var i = 0; i < length; i++) {
					this.cateList.push(this.dataList[i])
				}
			},
			getimg() {
				var result = window.matchMedia('(max-width: 414px)');
				if(result.matches) {
					if(document.querySelectorAll(".aui-col-5")[0]) {
						var colwidth = window.getComputedStyle(document.querySelectorAll(".aui-col-5")[0], null).width
						this.iconwidth = colwidth.substring(0, colwidth.indexOf(".") + 3) - 12;
					}
				} else {
					this.iconwidth = null
				}
			},
			jumpEvent(item, index) {
				// 跳到分类页
				// if(item.extendField) {
				// 	var urldata = JSON.parse(item.extendField).url.path
				// 	this.$router.push({
				// 		path: urldata
				// 	})
				// }
				handlePath(item) && this.$router.push(handlePath(item));
			},
		},
		watch: {
			dataList(data) {
				this.tendata()
			}
		},
		created() {
            this.setseeall(true)
		},
		mounted() {

			this.tendata()
			this.$nextTick(function() {
				this.getimg()
			})
		},
	}
</script>

<style>
	.classification {
		border: none;
		margin-bottom: 0rem;
	}
	
	.homeProductItem .aui-col-5 {
		padding: 6px;
	}
	
	.homeProductItem .aui-col-5 img {
		height: auto;
		margin: 0 auto
	}
	
	.classification .aui-col-5 .aui-grid-label {
		font-size: 0.6rem;
	}
</style>